<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="我的标签"></u-navbar> -->
		<free-divider></free-divider>
		<view class="py-5 pl-3 pr-3 dfes flex-wrap">
			<view class="font-14 text-333333">我的标签：</view>
			<view v-for="(item, index) in label" :key="index">
				<u-tag bg-color="#FFC251" :show="show" close-color="#BD3124" :closeable="true" :text="item" mode="dark"
					class="mr-1 mt-2" @close="deleteTag(item)" />
			</view>
			<view class="ml-4 mt-2">
				<u-button @click="addTags" size="mini" :plain="true"> <text
						class="iconfont icon-jia mr-1 font-12"></text>标签</u-button>
			</view>
		</view>

		<!-- 修改手机号码 弹框-->
		<free-confirm ref="confirmShow" title="添加标签">
			<u-form :model="form">
				<u-form-item :label-style="labelStyle" label="标签名" label-width="180" prop="labels">
					<u-input class="mr-3 " placeholder="请输入标签名" v-model="code.labels" input-align="right"
						type="textarea " />
				</u-form-item>
			</u-form>

		</free-confirm>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from "@/common/free-lib/util.js";
	import freeDivider from "@/components/free-ui/free-divider.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	export default {
		components: {
			freeDivider,
			freeConfirm,
		},
		data() {
			return {
				show: true,
				form: {
					labels: '',
					pageNo: 1,
					pageSize: 10,
				},
				code: {
					id: '',
					labels: ''
				},
				label: [],
				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
			}
		},
		computed: {

		},
		onLoad(options) {
			const id = options.id;
			console.log(this.id)
			this.tagList()
		},
		methods: {
			tagClick(index) {
				this.show = false;
			},
			tagList() {
				$H.get('/down/downMarketLabel/mobile/downById', {}, {}).then(res => {
					this.label = res.result.labelList
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},

			tags() {
				const userId = $U.getStorage("id");
				let o = {
					...this.code,
					id: userId
				}
				$H.post('/down/downMarketLabel/mobile/add', o, {}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
						this.tagList()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					}
				})
			},

			addTags(key) {
				this.$refs.confirmShow.show((close) => {
					this.tags();
					if (this.confirmText === '') {
						return uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					close();
					this.code.labels = ''; // 清空标签名
				});
			},
			deleteTag(item) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							$H.post(
								'/down/downMarketLabel/mobile/delete', {
									labels: item
								}, {
									header: {
										'Content-Type': 'application/x-www-form-urlencoded',
									}
								}
							).then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									_this.tagList()
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '删除取消',
								icon: 'none',
							})
						}
					},
				})
			},
		}
	}
</script>

<style>
</style>